<template>
  <div id="BarRate"></div>
</template>

<script>
import * as echarts from 'echarts/core'
import { GridComponent } from 'echarts/components'
import { BarChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
export default {
  name: 'BarRate',
  data() {
    return {
      myChart: null,
      // 数据
      ratelist: []
    }
  },
  created() {
    echarts.use([GridComponent, BarChart, CanvasRenderer])
  },
  mounted() {
    // 找到这个容器
    this.myChart = echarts.init(this.$el)
    // 配置项
    let option = {
      xAxis: {
        type: 'category',
        data: ['08-01', '08-02', '08-03', '08-04', '08-05', '08-06', '08-07'],
        axisLine: {
          lineStyle: {
            color: '#26CEEE' // 轴线颜色
          }
        }
      },
      yAxis: {
        type: 'value',
        axisLine: {
          lineStyle: {
            color: '#26CEEE' // 轴线颜色
          }
        },
        min: 0, // 设置最小值
        max: 40, // 设置最大值
        interval: 10 // 设置刻度间隔
      },
      grid: {
        top: '10%', // 调整网格顶部位置，以便为标题留出空间
        left: '10%',
        right: '10%',
        bottom: '10%'
      },
      title: {
        text: '气温(摄氏度℃)', // 设置单位文本
        left: 'left', // 标题位置
        top: 'top', // 标题位置
        textStyle: {
          color: '#909da9', // 标题文本颜色
          fontSize: 12 // 标题文本大小
        }
      },
      series: [
        {
          data: [29, 24, 32, 15, 29, 32, 35],
          type: 'bar',
        //   symbol: 'image://~@/assets/iotimg/温度3.png', // 替换为你的图片路径
        //   symbolSize: [20, 20], // 图片大小
        // //   symbolRepeat: true, // 重复图片
        //   symbolMargin: '5%', // 图片之间的间距
        //   symbolClip: true // 裁剪图片以适应柱子高度
        }
      ],
    //   graphic: [
    //     {
    //       type: 'image',
    //       z: 100,
    //       left: 'center',
    //       top: 'middle',
    //       style: {
    //         image: '~@/assets/iotimg/温度3.png', // 替换为你的图片路径
    //         width: 20, // 图片宽度
    //         height: 20, // 图片高度
    //         x: 0,
    //         y: 0
    //       }
    //     }
    //   ]
    }
    // 渲染数据
    this.myChart.setOption(option)
  }
}
</script>
<style lang="scss" scoped>
#BarRate {
  width: 100%;
  height: 100%;
}
</style>
